<template>
  <div class="addcomparison-box" @click="onConfirm">
    <i class="doorIcon" >&#xe64d;</i>
    <!-- <t-icon size="24" name="swap" class="swap-box-icon" :style="{ color: props.color }"></t-icon> -->
    <span :style="{ color: props.color }">对比</span>
  </div> 
  <div 
    id="move-transition-box-by-id"  
    :class="{
      'move-transition-box': mouseType,
      'move-transition-box-no': !mouseType,
    }"
  ></div>
</template>    
   
<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { getExhibitStore } from '@/store';
const mousePositionX = ref(0); 
const mousePositionY = ref(0);
const mouseType = ref(false);
const props = defineProps({
  color: {
    type: String,
    default: '#D2AD77',
  },
  dropImage: {
    type: String,
  },
});
const showMoveDot = ref(false); 
const elLeft = ref(0);
const elTop = ref(0);
const emit = defineEmits(['emitAddInfo']);
const onConfirm = () => {
  moveInit();
  emit('emitAddInfo');
};
const moveInit = () => {
  if (mouseType.value) {
    return;
  }

  var container = document.getElementById('move-transition-box-by-id');
  mouseType.value = true;
  container.style.bottom = mousePositionY.value + 'px';
  container.style.right = mousePositionX.value - 100 + 'px';

  setTimeout(() => {
    container.style.bottom = '88px';
    container.style.right = '100px';
  }, 50);

  setTimeout(() => {
    mouseType.value = false;
  }, 800);
};
window.addEventListener('mousemove', function (event) {
  mousePositionX.value = window.innerWidth - event.clientX;
  mousePositionY.value = window.innerHeight - event.clientY;
  // console.log('鼠标在浏览器中的位置：', mousePositionX.value, mousePositionY.value);
});
</script>

<style lang="less" scoped>
.addcomparison-box {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 64px;  
  border-radius: 6px; 
  .doorIcon{  
    font-size: 24px;  
    
  } 
  span {  
    margin-top: 4px;
     font-size: 16px;   
    font-weight: 400;
    color: #000000;
    line-height: 22px;
  }
}
.swap-box-icon {
  transform: rotate(90deg);
}
.move-transition-box-no {
  position: fixed;
  display: none;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
.move-transition-box {
  position: fixed;
  display: flex;
  transition: all 0.8s;
  z-index: 1024;
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
.addcomparison-box:hover{
 
background: #EBE4E3;
border-radius: 6px;
}
</style>